<template>
  <div class="desktop-icon flex-center flex-col" @click.left="handleOpenApp">
    <div class="icon">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="`#${app.icon}`"></use>
      </svg>
    </div>
    <div class="text">{{app.title}}</div>
  </div>
</template>

<script>
export default {
  name: "DesktopIcon",
  props: {
    app: {
      type: Object,
      default: () => ({})
    }
  },
  methods:{
    handleOpenApp() {
      this.$store.dispatch("openApp", {appID: this.app.appID})
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .desktop-icon{
    user-select: none;
    color: white;
    width: 80px;
    height: 100px;
    text-shadow: 1px 1px rebeccapurple;
    margin: $ms;
    border-radius: 5px;
    cursor: pointer;
    .icon{
      width: 45px;
      height: 45px;
      svg{
        width: 100%;
        height: 100%;
      }
    }
    &:hover{
      background-color: rgba(255,255,255,0.5);
    }
    .text{
      margin-top: $ms;
    }
  }
</style>
